<template>
	<view>
		<view class="image"><img src='../../../static/shen/Slice 1@2x.png' /></view>
		<view class="ProgressBar">
			<view :style="{marginLeft: progress-5 + '%' }">{{progress}}%</view>
			<view class="progress-bar-container">
				<view class="progress-bar" :style="{ width: progress + '%' }"></view>
			</view>
		</view>

		<view class="text1">资料提交中...</view>
		<view class="text2">额度评估中请耐心等待</view>

		<view class="text3">
			<view>
				<!-- <img src='../../../static/shen/Slice 3@2x.png' /> -->
				<img src='../../../static/shen/Slice 4@2x.png' /> 
				实名认证检测
			</view>
			<view>
				<img src='../../../static/shen/Slice 4@2x.png' /> 基本信息检测
			</view>
			<view>
				<img src='../../../static/shen/Slice 4@2x.png' /> 补充信息检测
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				progress: 100
			}
		},
		 watch: {  
		    progress(newVal, oldVal) {  
		      if (newVal === 100) {  
		        this.goToNextPage();  
		      }  
		    },  
		  },  
		  created(){
			  console.log(this.progress)
			  if (this.progress === 100) {  
			    this.goToNextPage();  
			  }  
		  },
		  methods: {  
		      goToNextPage() {  
				  uni.navigateTo({
				  	url: '/pages/message/Retention/Review'
				  });
		      }, 
		    },
	}
</script>

<style>
	.image {
		text-align: center;
		margin-top: 104rpx;

		img {
			width: 286rpx;
			height: 286rpx;
		}
	}

	.ProgressBar {
		width: 590rpx;
		margin: 0 auto;
		/* text-align: center; */
		margin-top: 108rpx;
	}

	.progress-bar-container {
		width: 100%;
		border-radius: 4px;
		overflow: hidden;
		width: 590rpx;
		height: 18rpx;
		background: #E0E7F0;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
	}

	.progress-bar {
		height: 20rpx;
		background-color: #2253FF;
		;
		/* 绿色 */
		text-align: center;
		color: white;
		line-height: 20px;
		transition: width 0.5s ease;
		border-radius: 20rpx;
		/* 平滑过渡效果 */
	}

	.text1 {
		width: 210rpx;
		height: 50rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		line-height: 42rpx;
		margin: 0 auto;
		margin-top: 26rpx;
	}

	.text2 {
		/* width: 590rpx; */
		height: 92rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
		line-height: 33rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-top: 26rpx;
	}

	.text3 {
		margin: 0 auto;
		text-align: center;
		margin-top: 74rpx;

		img {
			width: 36rpx;
			height: 36rpx;
			/* background: #2253FF; */
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin-right: 20rpx;
			text-align: center;
			vertical-align: middle;
		}

		view {
			margin-bottom: 36rpx;
			color: #2253FF;
		}
	}
</style>